今天筆者要來分享一個超好用的 VSCode 擴充套件給大家：

這個擴充套件好用在哪裡呢？

• 減少因打錯字所浪費的時間。
• 不用再自己搜尋指令或參數，它會幫你全部列出來。
• 可以整合客製的 Schematics 進去，不管是已發佈的還是未發佈的。
• 自動開啟產生出來的文件

需特別留意的是，此擴充套件只支援 Angular 5 以上的專案。

使用方式

有以下四種方式可以觸發

1. 直接在檔案目錄上按右鍵。如：

2. 點擊側邊欄的專屬 icon 。如：

如果沒有看到此 icon ，表示該專案不是 Angular 5 以上的專案。

3. 輸入指令，如：

4. 設定快捷鍵觸發，如：

預設支援的 Schematics 項目

這個套件預設支援以下 Schematics 項目（專案要安裝該套件）：

• @schematics/angular
• @angular/material
• @ionic/angular-toolkit
• @ngrx/schematics
• @nrwl/schematics
• @nstudio/schematics
• @ngxs/schematics
• @nativescript/schematics
• @ngx-formly/schematics
• primeng-schematics
• @ngx-kit/collection
• ngx-spec

整合客製的 Schematics

除了上述的 Schematics 之外，我們也可以將自己客製的 Schematics ，抑或者是不再上述清單中的 Schematics 一併整合進這個套件裡。

套件提供的整合方式有以下兩種：

1. 使用套件的預設路徑。
2. 在偏好設定中新增路徑。

使用套件的預設路徑

./schematics/collection.json 這個路徑是套件本身預先設定好的，只要將 Schematics 的 collection.json 放在 ./schematics 底下，套件就會自動去解析它。

在偏好設定中新增路徑

除了使用預設路徑之外，我們也可以在 VSCode 的偏好設定裡搜尋此套件的設定，並加入 Schematics 的 collection.json 實際所在位置的路徑以提供給套件解析。

拿昨天我們實戰練習的範例來說，該專案實際的 Schematics 路徑其實是 ./projects/my-library/schematics/collection.json （從專案根目錄開始算），所以我們只需要打開 VSCode 的偏好設定，搜尋 schematics ，然後把該路徑新增進去即可。

如：

除了透過 UI 加入之外 當然也可以直接打開 settings.json ，並直接加入 "ngschematics.schematics": ["./path/to/collection.json"] 之設定。

如：

另外，除了路徑之外，如果你的 Schematics 是透過 npm 下載的，可以直接透過上述方式直接把該 Package 的名稱加入，這個套件一樣能解析。

如：

完成設定後，記得重啟 VSCode 讓套件重新解析。

本日結語

雖然套件作者提供了四種啟動的方式，不過作者跟筆者都建議大家直接使用直接在目錄上點擊滑鼠右鍵的方式，因為套件會自動解析其路徑位置，避免打錯字造成的時間浪費。

明天筆者將會分享另一個超好用的工具給大家，敬請期待！

參考資料

• Angular Schematics - VSCdoe Extension